<template>
  <scroll-view  scroll-y enable-flex class="video-container" @scrolltolower='handlescrolltolower'>
    <block v-for="item in videowp" :key="item.id">
      <view class="video-item" @click="handleGoVideoPlay(item)">
        <image :src="item.img" mode="widthFix"></image>
      </view>
    </block>
  </scroll-view>
</template>

<script>
export default {
  props: {
    urlObj: Object
  },
  mounted() {
    this.__getData()
  },
  watch: {
    urlObj() {
      this.videowp = []
      this.__getData();
    }
  },
  data() {
    return {
      videowp: [],
      hasMore: true
    };
  },
  methods: {
    // ============ 发送网络请求 =============
    async __getData() {
      const result = await uni.request(this.urlObj);
      if(result[1].data.res.videowp.length === 0) {
        this.hasMore = false
        uni.showToast({title: '没有更多数据了',icon:'none'})
        return 
      }
      this.videowp = [...this.videowp,...result[1].data.res.videowp];
    },
    // ===========  事件监听 =================
    handlescrolltolower() {
      if(this.hasMore) {
        this.urlObj.data.skip+=  this.urlObj.data.limit;
        this.__getData()
      }else {
        uni.showToast({title: '没有更多数据了',icon:'none'})
      }
    },
    handleGoVideoPlay(item) {
      // 不需要发送请求
      getApp().globalData.video = item;
      uni.navigateTo({
        url: '/pages/videoplay/index'
      })
    }
  }
};
</script>

<style lang='scss' scoped>
.video-container {
    height: calc( 100vh - 36px );
    display: flex;
    flex-wrap: wrap;
    .video-item {
      width: 33.33%;
      border: 5rpx solid #fff;
      image {

      }
    }

}
</style>